<template>
  <div class="blgrid-comp-ct">
    <grid-layout
      :layout.sync="datalist"
      :col-num="parseInt(rowCol)"
      :row-height="35"
      :is-draggable="false"
      :is-resizable="false"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[5, 5]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in datalist"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        <div class="grid" @click="onClick(item)">
          <div class="icon" :style="{'background-color':item.data.bg_color}">
            <i class="iconfont " 
             :class="item.data.iconfont?item.data.iconfont:'icon-piclight'"
            ></i>
          </div>
          <div class="title">
            <span>{{item.data.title}}</span>
          </div>
        </div>
      </grid-item>
    </grid-layout>
    <!-- {{datalist}} -->
  </div>
</template>
<script>
import VueGridLayout from "vue-grid-layout";
export default {
  name: "bl-grid",
  data() {
    return {};
  },
  props: {
    list: {
      type: null,
      default: []
    },
    rowCol: {
      type: null,
      default: 12
    }
  },
  computed: {
    datalist() {
      //处理功能标签的数据
      let ret = [];
      for (var key = 0; key < this.list.length; key++) {
        let hpost = 2;
        let rowNum = Math.floor(key / this.rowCol);
        let xpost = key - this.rowCol * rowNum;
        ret.push({
          x: xpost,
          y: rowNum * hpost,
          w: 1,
          h: hpost,
          i: key,
          data: this.list[key]
        });
      }
      return ret;
    }
  },
  components: {
    //格子布局
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  },
  methods: {
    onClick(json) {
      if(json.data.href){
        this.pushPage(json.data.href)
      }else{
        //调用全局的方法
        this.Util.showToast(json.data.title);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.blgrid-comp-ct {
  padding: 5px 0px;
  .grid {
    $icon-photp-size: 50px;
    $font-size: 30px;
    .icon {
      padding: 2px;
      height: $icon-photp-size;
      width: $icon-photp-size;
      background-color: #c4d4d4;
      margin: 0 auto;
      line-height: $icon-photp-size;
      border-radius: 50%;
      i {
        font-size: $font-size;
        color: #ffffff;
      }
    }
    .title {
      padding: 2px;
      font-size: 0.8rem;
    }
  }
}
</style>
